<template>
  <div v-if="viewLoading">
    <van-panel>
      <div slot="header" class="van-cell van-hairline van-panel__header">
        <div class="van-cell__title">
          <div class="van-cell__label">当前预约币: {{ models.user_wallet.appointment }}个</div>
        </div>
      </div>

      <van-cell-group>
        <van-field class="van-cell--center" placeholder="请输入选择字段" name="field" required readonly
          label="字段" v-model="actionsheetCurrentField" @click="actionsheetShowField = true"
          :error="$validator.errors.has('field')" :error-message="$validator.errors.first('field')"
          data-vv-as="字段" v-validate="{required: true}"
        />

        <van-field class="van-cell--center" type="number" placeholder="请输入数量" name="amount" required
          label="数量" v-model="formFields.amount"
          :error="$validator.errors.has('amount')" :error-message="$validator.errors.first('amount')"
          data-vv-as="数量" v-validate="{required: true, min_value: 1000}"
        />

        <van-field class="van-cell--center" type="password" placeholder="请输入安全密码" name="safe_password" required
          label="安全密码" v-model="formFields.safe_password"
          :error="errors.has('safe_password')" :error-message="errors.first('safe_password')"
          data-vv-as="安全密码" v-validate="{required: true, min: 6}"
        />
      </van-cell-group>

      <van-button size="small" type="primary" :loading="onButtonLoading" @click="onSubmit" style="width: 100%;">提现</van-button>
    </van-panel>

    <van-actionsheet v-model="actionsheetShowField" :actions="actionsheetActionsField" />
  </div>
</template>

<script>
  import { Actionsheet, Button, Cell, CellGroup, Field, Panel, Toast } from 'vant';
  import { mapState } from 'vuex';
  import userMutuallySellApi from '@/api/user/mutually/sell/index';

  export default {
    components: {
      [Actionsheet.name]: Actionsheet,
      [Button.name]: Button,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field,
      [Panel.name]: Panel
    },
    data() {
      return {
        actionsheetCurrentField: '',
        actionsheetShowField: false,
        actionsheetActionsField: [
          { name: '静态', field: 1, fields_key: 'static', callback: this.actionsheetCallbackField },
          { name: '动态', field: 2, fields_key: 'dynamic', callback: this.actionsheetCallbackField }
        ],
        onButtonLoading: false,
        formFields: {
          field: '',
          amount: '',
          safe_password: ''
        },
        viewLoading: false
      };
    },
    methods: {
      onSubmit() {
        this.onButtonLoading = true;
        this.$validator.validateAll().then((isValid) => {
          if(isValid) {
            userMutuallySellApi.createByToken(this.formFields).then((res) => {
              Toast(res.msg);
              this.onButtonLoading = false;
              if(res.code != 0) { return false; }
              this.actionsheetCurrentField = '';
              this.formFields = {
                field: '',
                amount: '',
                safe_password: ''
              };
              this.$store.commit('user/setUserWallet', res.user_wallet);
              return true;
            }).catch((err) => {
              this.onButtonLoading = false;
            });
          } else {
            Toast('请输入必要栏目');
            this.onButtonLoading = false;
          }

          return false;
        });
      },
      actionsheetCallbackField(action) {
        this.actionsheetCurrentField = action.name+'余额:'+Math.round(this.models.user_wallet[action.fields_key], 2)+'分';
        this.formFields.field = action.field;
        this.actionsheetShowField = false;
      }
    },
    computed: mapState({
      models: state => state.user
    }),
    created() {
      this.$store.dispatch('user/findFirstByTokenIsEmpty').then((res) => {
        this.viewLoading = true;
        if(res.code != 0) {
          Toast(res.msg);
          return false;
        }
      }).catch((err) => {
        this.viewLoading = true;
      });
    }
  };

</script>
